<template>
  <el-dialog v-model="addOrEditVisible" title="小核酸预约" :before-close="closeEditDialog"
             width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
             :size="formSize" status-icon>
      <el-row>
        <el-col :span="24">
          <el-form-item label="预约时间" prop="bookingTime">
            <el-input v-model="ruleForm.bookingTime"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="预约分享ID，从哪个分享的ID中进行预约的" prop="bookShare_id">
            <el-input v-model="ruleForm.bookShareId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="用户编号" prop="userId">
            <el-input v-model="ruleForm.userId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="用户名称" prop="userName">
            <el-input v-model="ruleForm.userName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="手机号码" prop="userPhone">
            <el-input v-model="ruleForm.userPhone"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="分享ID" prop="shareId">
            <el-input v-model="ruleForm.shareId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="预约门店" prop="deptId">
            <el-input v-model="ruleForm.deptId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="crm门店" prop="crmStore_id">
            <el-input v-model="ruleForm.crmStoreId"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
     <span class="dialog-footer">
       <el-button @click="closeEditDialog">关闭</el-button>
       <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
     </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import router from "@/router";
import {BookingXiaohesuan} from '@/apis/model/booking/BookingXiaohesuanModel';
import {insertBookingXiaohesuan, updateBookingXiaohesuan} from '@/apis/http/booking/BookingXiaohesuanHttp';

interface Prop {
  addOrEditVisible: boolean,
  ruleForm: BookingXiaohesuan,
  addDataType: string
}

// 刷新list页面
const refushList = ref(false);

// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["closeEditDialog"]);

// 关闭按钮
const closeEditDialog = () => {
  emit("closeEditDialog", {
    addOrEditVisible: !props.addOrEditVisible,
    refushList: refushList.value
  })
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  // id: [
  //   {required: true, message: '请输入编号', trigger: 'blur'}
  // ],
  // bookingTime: [
  //   {required: true, message: '请输入预约时间', trigger: 'blur'}
  // ],
  // bookShare_id: [
  //   {required: true, message: '请输入预约分享ID，从哪个分享的ID中进行预约的', trigger: 'blur'}
  // ],
  // userId: [
  //   {required: true, message: '请输入用户编号', trigger: 'blur'}
  // ],
  // userName: [
  //   {required: true, message: '请输入用户名称', trigger: 'blur'}
  // ],
  // userPhone: [
  //   {required: true, message: '请输入手机号码', trigger: 'blur'}
  // ],
  // shareId: [
  //   {required: true, message: '请输入分享ID', trigger: 'blur'}
  // ],
  // deptId: [
  //   {required: true, message: '请输入预约门店', trigger: 'blur'}
  // ],
  // crmStore_id: [
  //   {required: true, message: '请输入crm门店', trigger: 'blur'}
  // ],
  // delFlag: [
  //   {required: true, message: '请输入删除 0-否 1-是', trigger: 'blur'}
  // ],
  // createUser: [
  //   {required: true, message: '请输入创建人', trigger: 'blur'}
  // ],
  // createTime: [
  //   {required: true, message: '请输入创建时间', trigger: 'blur'}
  // ],
  // updateTime: [
  //   {required: true, message: '请输入创建时间', trigger: 'blur'}
  // ],
  // remark: [
  //   {required: true, message: '请输入备注', trigger: 'blur'}
  // ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      if (props.addDataType === 'add') {
        insertBookingXiaohesuan(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '创建成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('创建失败！')
          }
        })
      } else if (props.addDataType === 'edit') {
        updateBookingXiaohesuan(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '更新成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('更新失败！')
          }
        })
      }
    } else {
      ElMessage.error('请完善信息！')
    }
  })
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
